<template>

</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "PieLine",
  mounted() {
    this.initCharts()
},
  methods:{
    initCharts(){
      const chartDom = document.getElementById('china-right-bottom');
      const myChart = echarts.init(chartDom);
      let option;

      $.get(this.$BaseUrl+"/chinaAsiangameInfo/getall",function(res) {
        console.log(res);
        let dimensions=Object.keys(res[0]);
        let all=[['年份'],['金牌'],['银牌'],['铜牌']]
        res.forEach((value,index)=>{
          all[0].push(value['year']);
          all[1].push(value['goldMedal']);
          all[2].push(value['silverMedal']);
          all[3].push(value['bronzeMedal']);
        });
        console.log(all);

      setTimeout(function () {
        option = {

          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source:all
          },
          xAxis: { type: 'category' },
          yAxis: { gridIndex: 0 },
          grid: { top: '55%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@2014} ({d}%)'
              },
              encode: {
                itemName: '年份',
                value: '2014',
                tooltip: '2014'
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);
      });

      option && myChart.setOption(option);
    })
      window.addEventListener("resize",()=>{
        myChart.resize();
      });
    }
  }
}


</script>

<style scoped>

</style>
